import React, { useMemo, useState, useRef, useEffect, useCallback } from 'react'

import DataSet from '@antv/data-set';
import { Chart } from '@antv/g2';

const Chart15 = () => {
	const containerRef = useRef()

    const data = [
        { Date: '22 February', num1: 50000, num2: 125000, num3: 125000 },
        { Date: '28 February', num1: 60000, num2: 150000, num3: 250000 },
        { Date: '3 March', num1: 100000, num2: 250000, num3: 500000 },
        { Date: '20 March', num1: 200000, num2: 500000, num3: 125000 },
        { Date: '7 April', num1: 250000, num2: 625000, num3: 625000 },
        { Date: '13 June', num1: 210000, num2: 525000, num3: 500000 },
    ]
    const [chart, setChart] = useState(null)

    useEffect(() => {
        if (data && !chart) {
            const c = new Chart({
                container: 'chart15',
                autoFit: true,
                width: 500,
                height: 300,
            })
            setChart(c)
        }
    }, [data])

    useEffect(() => {
        chart && renderChart()
    }, [chart, data])


    const renderChart = () => {
        chart.scale('Date', {
            range: [0, 1],
            tickCount: 10,
            type: 'timeCat',
            mask: 'MM-DD',
        });
        chart.scale({
            range: {
                nice: true,
                sync: true,
            },
            value: {
                nice: true,
                sync: true,
            },
            value1: {
                nice: true,
                sync: true,
            }
        });
        chart.tooltip(false);

        const ds = new DataSet();
        const dv2 = ds
            .createView()
            .source(data)
            .transform({
                type: 'fold',
                fields: ['num1', 'num2', "num3"],
                key: 'type',
                value: 'value',
                retains: ['Date'],
            });
        const view2 = chart.createView({
            padding: [8, 8, 48, 64],
        });
        console.log(dv2.rows)
        view2.data(dv2.rows);
        view2
            .line()
            .shape('smooth')
			.position('Date*value')
            .color('type');

        chart.removeInteraction('legend-filter'); // 关闭图例过滤交互
        chart.removeInteraction('legend-item:click:')
        chart.render();
    }

	return (
		<div>
			<div id={'chart15'} ref={containerRef} style={{ height: 400, width: 600 }} />
		</div>
	)
}

export default Chart15
